<template>
  <div>
    <h1>App</h1>
    <div>
      {{ age }}--{{ name }}--{{ good.goodName }}--{{ good.goodPrice }}--{{ doubleAge }}
    </div>
    <div>
      <input type="text" @change="change" ref="inputRef">
      <button @click="print">打印inputRef</button>
    </div>
    <TestCom ref="com" a="bread" :b="2" :c="true" @handle="handle" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue';

// 自行推导类型
const age = ref(22)
// 写类型
const name = ref<string>('长江二桥')
// 给引用类型写类型
interface Good {
  goodName: string
  goodPrice: number
}
const good = ref<Good>({
  goodName: '电脑',
  goodPrice: 10000
})
// 计算属性
const doubleAge = computed<number>(() => {
  return age.value * 2
})
// 事件处理函数
const change = (event: Event) => {
  console.log((event.target as HTMLInputElement).value);
}
// 模板引用
const inputEle = useTemplateRef<HTMLInputElement>('inputRef')
// 组件模板引用
import TestCom from './TestCom.vue';
type comType = InstanceType<typeof TestCom>
const comRef = useTemplateRef<comType>('com')
const print = () => {
  console.log(inputEle.value?.value);
  console.log(comRef.value?.money);
}
// emit
const handle = (money: number) => {
  console.log(money);

}
</script>

<style scoped></style>